<template>
  <!-- 用户侧 -->
  <div class="brand2B">
    <img src="../../../assets/img/advertisement/top.png">
    <div class="ppxx">
      <section>
        <h4 class="commonTitle">
          品牌信息
          <span>/BRAND INFORMATION</span>
        </h4>
        <div>
          <div class="imgBox">
            <img src="../../../assets/img/common/brandLogo.png">
          </div>
          <ul>
            <li>
              <span>迪士尼</span>
              <img v-if="rzBool" src="../../../assets/img/common/yrz.png">
              <img v-else src="../../../assets/img/common/wrz.png">
              <button>认领品牌></button>
            </li>
            <li>
              <span class="liTitle">标语</span>
              <span>中国智造，引领未来</span>
            </li>
            <li>
              <span class="liTitle">归属</span>
              <span>{{ gsMsg }}</span>
              <router-link v-if="Business" to="/">去完善信息></router-link>
            </li>
            <li>
              <span class="liTitle">标签</span>
              <button>鞋子</button>
              <button>年轻</button>
              <button>有活力</button>
            </li>
          </ul>
        </div>
        <p class="ppjj">品牌简介：</p>
        <p>全球闻名遐迩的迪士尼，全称为The Walt Disney Company，取名自其创始人华特·迪士尼，是总部设在美国伯班克的大型跨国公司，主要业务包括娱乐节目制作，主题公园，玩具，图书，电子游戏和传媒网络。皮克斯动画工作室（PIXAR Animation Studio）、惊奇漫画公司（Marvel Entertainment Inc）、试金石电影公司（Touchstone Pictures）、米拉麦克斯（Miramax）电影公司、博伟影视公司（Buena Vista Home Entertainment）、好莱坞电影公司（Hollywood Pictures）、ESPN体育，美国广播公司（ABC）都是其旗下的公司（品牌）。迪士尼于2012年11月收购了卢卡斯影业。</p>
      </section>
      <aside>
        <div>
          <div>
            <i class="iconfont iconsearch_icon_liulanlaing" />
            <span>10932</span>
          </div>
          <button @click="joinBrand">我要加盟</button>
        </div>
        <div class="gsxx">
          <h5>
            公司信息
            <span>/COMPANY INFORMATION</span>
          </h5>
          <p>集合智造（北京）科技有限公司</p>
          <div class="gswz">
            <span>公司网址</span>
            <span>www.jihezhizao.com</span>
          </div>
          <div class="gsdz">
            <span>公司地址</span>
            <span>北京市海淀区龙华新区汇海广场C座 </span>
          </div>
        </div>
      </aside>
    </div>
    <div v-if="jmyqBool" class="jmyq">
      <h4 class="commonTitle">
        加盟要求
        <span>/JOINING REQUIREMENTS</span>
      </h4>
      <p class="commonContent">全球闻名遐迩的迪士尼，全称为The Walt Disney Company，取名自其创始人华特·迪士尼，是总部设在美国伯班克的大型跨国公司，主要业务包括娱乐节目制作，主题公园，玩具，图书，电子游戏和传媒网络。皮克斯动画工作室（PIXAR Animation Studio）、惊奇漫画公司（Marvel Entertainment Inc）、试金石电影公司（Touchstone Pictures）、米拉麦克斯（Miramax）电影公司、博伟影视公司（Buena Vista Home Entertainment）、好莱坞电影公司（Hollywood Pictures）、ESPN体育，美国广播公司（ABC）都是其旗下的公司（品牌）。迪士尼于2012年11月收购了卢卡斯影业。</p>
    </div>
    <div v-if="jmzcBool" class="jmzc">
      <h4 class="commonTitle">
        加盟支持
        <span>/AFFILIATE SUPPORT</span>
      </h4>
      <p class="commonContent">全球闻名遐迩的迪士尼，全称为The Walt Disney Company，取名自其创始人华特·迪士尼，是总部设在美国伯班克的大型跨国公司，主要业务包括娱乐节目制作，主题公园，玩具，图书，电子游戏和传媒网络。皮克斯动画工作室（PIXAR Animation Studio）、惊奇漫画公司（Marvel Entertainment Inc）、试金石电影公司（Touchstone Pictures）、米拉麦克斯（Miramax）电影公司、博伟影视公司（Buena Vista Home Entertainment）、好莱坞电影公司（Hollywood Pictures）、ESPN体育，美国广播公司（ABC）都是其旗下的公司（品牌）。迪士尼于2012年11月收购了卢卡斯影业。</p>
    </div>
    <div class="yhkb">
      <h4 class="commonTitle">
        用户口碑
        <span>/AFFILIATE SUPPORT</span>
      </h4>
      <div class="progressCon">
        <span>{{ guli }}</span>
        <div class="progressBox">
          <div class="progress" :style="{width: proScale+'%'}" />
        </div>
        <span>{{ paizhuan }}</span>
      </div>
      <div class="controlPro">
        <p @click="addPro">
          <i class="iconfont iconsearch_icon_dianzan" />
          <span>点赞</span>
        </p>
        <p @click="cutPro">
          <i class="iconfont iconsearch_icon_paizhuan" />
          <span>拍砖</span>
        </p>
      </div>
    </div>
    <recommends :recommends="tjMsg" />
  </div>
</template>

<script>
import recommends from '../../../components/template-item1/recommends'
export default {
  components: { recommends },
  data() {
    return {
      rzBool: true,
      vipBool: false,
      percentage: 20,
      progress: 350,
      total: 551,
      guli: 25,
      paizhuan: 10,
      tjMsg: {
        tit: '加盟推荐',
        moreMsg: '查看更多',
        data: [
          {
            img: require('../../../assets/img/join/logo2.png'),
            name: '迪士尼',
            describe: '专业制造100年',
            iDo: '我要加盟'
          },
          {
            img: require('../../../assets/img/join/logo2.png'),
            name: '哈士奇',
            describe: '专业制造100年',
            iDo: '我要加盟'
          },
          {
            img: require('../../../assets/img/join/logo2.png'),
            name: '万达地产',
            describe: '专业制造100年',
            iDo: '我要加盟'
          }
        ]
      },
      jmyqBool: true,
      jmzcBool: true,
      Business: true,
      gsMsg: '集合智造（北京）科技有限公司',
      msg: {
        closeCommits: 'changePop1',
        headBottomLine: true,
        title: '提交成功',
        tltStyle: {
          color: '#333',
          height: '40px',
          fontSize: '24px'
        },
        close: true,
        img: {
          url: require('../../../assets/img/pop/submit_icon_car.png'),
          style: {
            width: '202px',
            margin: '0 auto',
            marginBottom: '49px'
          }
        },
        tagP: [
          {
            text: '提交成功！马上会有专业的服务人员给取得联系，感谢您的咨询！',
            style: {
              width: '440px',
              lineHeight: '1.8',
              color: '#333',
              fontSize: '20px',
              textAlign: 'center',
              margin: '0 auto'
            },
            childs: {}
          }
        ],
        buttons: {
          num: 1,
          text: '好的',
          style: {
            width: '218px',
            height: '42px',
            borderRadius: '4px',
            backgroundColor: '#417AEF',
            fontSize: '18px',
            color: '#fff',
            marginBottom: '50px'
          }
        }

      }
    }
  },
  computed: {
    proScale() {
      return (this.guli / (this.guli + this.paizhuan) * 100).toFixed(0)
    }
  },
  methods: {
    addPro() {
      this.guli += 1
    },
    cutPro() {
      this.paizhuan += 1
    },
    joinBrand() {
      this.$store.commit('template1/changePopJoin', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.brand2B{
  width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 70px;
  .commonTitle{
    height: 61px;
    line-height: 61px;
    width: 100%;
    color: #333;
    font-size: 20px;
    border-bottom: 1px solid #EDEDED;
    >span{
      font-size: 16px;
      color: #999;
    }
  }
  >div{
    background-color: #fff;
    margin-bottom: 20px;
    width: 890px;

    >.commonContent{
      color: #666666;
      font-size: 16px;
      line-height: 2;
      padding: 20px 0 30px 0;
    }
  }
  >.recommends{
    //子组件宽度，上边限制了，这里覆盖下
    width: 1200px;
  }
  >img{
    width: 100%;
    margin-bottom: 16px;
  }
  >.ppxx{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    background-color: transparent;
    >section{
      width: 890px;
      padding: 0 24px 0 30px;
      background-color: #fff;
      >div{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        padding-top: 20px;
        margin-bottom: 25px;
        >.imgBox{
          width: 250px;
          height: 141px;
          box-shadow:0px 1px 3px rgba(5,36,100,0.18);
          margin-right: 28px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          >img{
            display: block;
            max-width: 205px;
            max-height: 80%;
          }
        }
        >ul{

          >li{
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            font-size: 14px;
            color: #666;
            >.liTitle{
              margin-right: 24px;
            }
          }
          >li:first-child{
            margin-bottom: 26px;
            >span:first-child{
              font-size: 24px;
              color: #333;
              margin-right: 16px;
            }
            >img{
              display: block;
              width: 78px;
              height: 20px;
              margin-right: 9px;
            }
            >button{
              font-size: 14px;
              color: #417AEF;
              background-color: transparent;
              cursor: pointer;
            }
          }
          >li:nth-child(2){
            margin-bottom: 12px;
          }
          >li:nth-child(3){
            margin-bottom: 9px;
          }
          >li:nth-child(4){
            >button{
              font-size: 14px;
              border: 1px solid #ddd;
              border-radius: 4px;
              height: 26px;
              line-height: 26px;
              padding: 0 12px;
              background-color: transparent;
              margin-right: 16px;
            }
            >button:last-child{
              margin-right: 0;
            }
            >button:nth-child(2){
              color: #417AEF;
              border: 1px solid #417AEF;
            }
            >button:nth-child(3){
              color: #EF4141;
              border: 1px solid #EF4141;
            }
            >button:nth-child(4){
              color: #EF9841;
              border: 1px solid #EF9841;
            }
            >button:nth-child(5){
              color: rgb(111, 221, 96);//自己加的颜色，效果图只有三个色
              border: 1px solid rgb(111, 221, 96);
            }
            >button:nth-child(6){
              color: rgb(188, 219, 73);//自己加的颜色，效果图只有三个色
              border: 1px solid rgb(188, 219, 73);
            }
          }
        }
      }
      >.ppjj{
        color: #333;
        font-size: 16px;
        margin-bottom: 10px;
      }
      >p:last-child{
        color: #333;
        font-size: 16px;
        line-height: 2;
        margin-bottom: 28px;
      }
    }
    >aside{
      width: 290px;
      >div{
        width: 100%;
        background-color: #fff;
        padding: 0 17px;
      }
      >div:first-child{
        margin-bottom: 20px;
        >div:first-child{
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          height: 76px;
          border-bottom: 1px solid #DBDBDB;
          margin-bottom: 30px;
          >i{
            color: #999;
            font-size: 23px;
            margin-right: 12px;
          }
          >span{
            font-size: 24px;
            color: #999;
          }
        }
        >button{
          width: 100%;
          height: 38px;
          line-height: 38px;
          text-align: center;
          background-color: #417AEF;
          font-size: 16px;
          color: #fff;
          border-radius: 4px;
          margin-bottom: 30px;
          cursor: pointer;
        }
      }
      >.gsxx{
        color: #333;
        padding-bottom: 31px;
        >h5{
          height: 64px;
          line-height: 64px;
          border-bottom: 1px solid #DBDBDB;
          font-size: 18px;
          margin-bottom: 20px;
          >span{
            font-size: 12px;
            color: #999;
          }
        }
        >p{
          font-size: 18px;
          margin-bottom: 30px;
        }
        >div{
          font-size: 16px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          -align-items: center;
          >span:first-child{
            color: #999;
            width: 64px;
            padding-top: 4px;
          }
          >span:last-child{
            line-height: 1.5;
            width: 170px;
          }
        }
        >.gswz{
          margin-bottom: 20px;
        }
      }
    }
  }
  >.jmyq{
    padding: 0 24px 0 30px;
  }
  >.jmzc{
    padding: 0 24px 0 30px;
  }
  >.yhkb{
    padding: 0 24px 0 30px;
    >h4{
      margin-bottom: 50px;
    }
    >.progressCon{
      width: 100%;
      height: 23px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 18px;
      >.progressBox{
        width: 551px;
        height: 21px;
        border: 2px solid #417AEF;
        border-radius: 15px;
        margin-left: 9px;
        margin-right: 9px;
        >.progress{
          height: 17px;
          background-color: #417AEF;
          border-radius: 8px;
        }
      }
    }
    >.controlPro{
      width: 300px;
      margin: 0 auto;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 18px;
      >p{
        width: 32px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        >i{
          margin-bottom: 11px;
          font-size: 27px;
        }
        >span{
          font-size: 16px;
          color: #333;
        }
      }
      >p:first-child{
        >i{
          color: #417AEF;
        }
      }
      >p:last-child{
        color: #999;
        >i{
          transform: rotateY(180deg)
        }
      }
    }
  }
}
</style>
